<template>
  <div>
    <div class="team">
      <div class="teamtitle">
        <h1>案例中心</h1>
      </div>
      <div v-show="isShow">
        <div class="area">
          <div v-for="item in caseList" :key="item.id">
            <el-card :body-style="{ padding: '0px' }" shadow="hover">
              <img :src="item.successtList[0].url" class="image" fit="cover" @click="gotoDeatil(item.id)">
              <div style="padding: 14px;" @click="gotoDeatil(item.id)">
                <div class="casetitle" :title="item.title">{{item.title}}</div>
              </div>
            </el-card>
          </div>
        </div>
        <div style="margin:10px 0 0 0;">
          <router-link to='/case'>
            <a>查看更多<i class="el-icon-d-arrow-right"></i></a>
          </router-link>
        </div>
      </div>
      <div class="area" style="font-size:25px;" v-show="!isShow">
        暂无案例
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: 'HomeSuccess',
  data () {
    return {
      caseList: []
    }
  },
  methods: {
    getCase () {
      this.$axios({
        method: 'get',
        url: '/success/selectByTime?page=1&pageSize=6'
      }).then((res) => {
        if (res.status === 200) {
          this.caseList = res.data.data.rows
        }
      })
    },
    gotoDeatil (id) {
      this.$router.push({
        path: '/Deatil',
        query: {
          name: 'Case',
          id: id
        }
      })
    }
  },
  mounted () {
    this.getCase()
  },
  computed: {
    isShow () {
      if (this.caseList.length === 0) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped>
.team {
  margin: 30px 0;
  padding: 20px 0;
  background: white;
  text-align: center;
}
.teamtitle {
  font-family: "Hiragino Sans GB";
  font-size: 44px;
  text-align: center;
  padding-top: 50px;
}
.area {
  overflow: hidden;
  padding: 20px 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 200px;
  height: 200px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.casetitle {
  width: 172px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
a {
  text-decoration: none;
  font-size: 18px;
  color: #002854;
}
</style>
